<template>
  <div class="fast-slect">
    <breadcrumb :navdata="bdname"></breadcrumb>
    <ul class="fast-slect-content">
      <li
        v-for="(item, index) in timeList"
        :key="index+'timeList'"
      >
        <div class="title">
          <h3 class="text">上课时间{{index+1}}</h3>
          <span class="del" @click='deleteTimeItem(index)'>删除本节</span>
        </div>
        <div class="slect-time-wrapper">
          <div class="start-end">
            <p class="start-time common-time">起止时间</p>
            <div class="slect-time">
              <el-date-picker
                v-model="item.start"
                type="date"
                placeholder="选择开始时间"
                @change="changeEnd(index)" 
                :picker-options="item.startPickerOptions"
                :clearable="false"
                :editable="false">
              </el-date-picker> 
              <span class="right">></span>
              <el-date-picker
                v-model="item.end"
                type="date"
                placeholder="选择结束时间"
                @change="changeStart(index)" 
                :picker-options="item.endPickerOptions"
                :clearable="false"
                :editable="false">
              </el-date-picker>
            </div>
          </div>
          <div class="school-time">
            <p class="end-time common-time">上课时间</p>
            <div class="slect-time">
              <el-select v-model="item.week" placeholder="选择星期" @change="handelCanSubmit">
                <el-option
                  v-for="witem in options"
                  :key="witem.value"
                  :label="witem.label"
                  :value="witem.value">
                </el-option>
              </el-select>
              <el-select v-model="item.time" placeholder="选择上课时间" @change="handelCanSubmit">
                <el-option
                  v-for="titem in timeOpt"
                  :key="titem.value"
                  :label="titem.label"
                  :value="titem.value">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
      </li>
      <li class="add-time">
        <span class="icon-tianjiatupian"  @click="addTime"></span>
        <p class="add">点击新增一节</p>
      </li>
    </ul>

    <div class="submit">
      <span class="btn sure" @click="submitCourseTime">确定</span>
      <span class="btn" @click="close">关闭</span>
    </div>

  </div>
</template>

<script>
import fastSelect from 'plus/mixins/fastSelect';
import breadcrumb from "basic/breadcrumb/breadcrumb"
import { mapGetters } from 'vuex';
export default {
  name: 'webFaseSlect',
  mixins: [fastSelect],
  created(){
    this.$set(this.bdname, 2, {
     name: this.freeTime.courseName,
     url: '/classPlan/selectDate'
   })
  },
  data(){
    return {
      bdname: [
        {
          name: '首页',
          url: '/'
        },
        {
          name: '开班计划',
          url: '/classPlan/classList'
        },
        {},
        {
          name: '快捷选择时间'
        }
      ],
      courseTime: [{
        startTime: '2019-04-01',
        endTime: '2019-04-05'
      }],
      options: [
        {
          value: 0,
          label: '周天'
        }, {
          value: 1,
          label: '周一'
        }, {
          value: 2,
          label: '周二'
        }, {
          value: 3,
          label: '周三'
        }, {
          value: 4,
          label: '周四'
        }, {
          value: 5,
          label: '周五'
        }, {
          value: 6,
          label: '周六'
        }
      ],
      selectWeek: '',
      timeOpt: [
        {
          value: 0,
          label: '上（9:30-12:00）'
        },
        {
          value: 1,
          label: '中（14:30-17:00）'
        },
        {
          value: 2,
          label: '晚（19:00-21:30）'
        }
      ],
      courTime: ''
    }
  },
  computed: {
    ...mapGetters(['freeTime'])
  },
  components: {
    breadcrumb
  },
  methods: {
    close(){
      this.$confirm('如果您删除本节的话，系统将不会保存您所编辑的数据哟~是否确认删除？', '提示', {
        confirmButtonText: '我再想想',
        cancelButtonText: '狠心离开',
        customClass: 'class-plan-msg'
      }).then(() => {
        
      }).catch(() => {
        setTimeout(()=>{
          this.$router.back(-1)
        }, 500)
      })
    },
    changeStart (key){
      let currentItem = this.timeList[key]  
      let start = this.minDate
      let end =  currentItem.end || this.maxDate
      currentItem.startPickerOptions = Object.assign({},currentItem.startPickerOptions,{
        disabledDate: (time) => {
          return (time.getTime() < start) || (time.getTime() > end)
          }
      })
      this.handelCanSubmit()
    },
    changeEnd (key){
     let currentItem = this.timeList[key]
      let start = currentItem.start || this.mixDate
      let end =  this.maxDate
      currentItem.endPickerOptions = Object.assign({},currentItem.endPickerOptions,{
        disabledDate: (time) => {
          return (time.getTime() < start) || (time.getTime() > end)
          }
      })
      this.handelCanSubmit()
    },
    handelSelectWeek(){
      console.log(this.timeList)
    },
    handelSelectTimeFn(){
      console.log(this.timeList)
    }
  }
}
</script>

<style lang="stylus" scoped>
 @import "~style/base"

.fast-slect
  background-color $color-person-bg
  padding-bottom 226px

  .fast-slect-content
    width 1200px
    margin 35px auto 0
    @extend .clear-fix

    li
      float left
      width 584px
      height 242px
      margin 0 32px 30px 0
      background-color #fff
      box-shadow 0px 1px 2px 0px rgba(0, 0, 0, 0.08)
      border-radius 4px

      .title
        padding 24px 20px
        border-bottom 1px solid #eee
        @extend .borderBox
        @extend .clear-fix

        .text,.del
          float left
          height 16px
          line-height @height
          font-size $font-size-medium-x
        
        .del
          float right
          color $color-person-btn
          font-size $font-size-medium
          cursor pointer
      
      .slect-time-wrapper
        padding 30px 20px
        @extend .borderBox

        .start-end, .school-time
          @extend .clear-fix
          .common-time
            float left
            width 144px
            height 44px
            padding-right 20px
            line-height @height
            color $color-person-text
            font-size $font-size-medium
            text-align right 
            @extend .borderBox

          .slect-time
            float left
            width 400px
            height 44px
            @extend .borderBox
            
            .right
              width 36px 
              font-size $font-size-medium
              text-align center
              line-height 44px
              color $color-person-text
    /deep/  .el-date-editor, .right
              float left
              width 182px
              height 100%
              @extend .borderBox
              .el-input__inner
                height 100%
                padding-left 40px
                background-color #F2F2F2
                border none

        
    /deep/ .el-select
              width 182px
              float left

              .el-input__inner
                background-color #F2F2F2
                border none
              .el-icon-arrow-up:before
                color #535353

            .el-select + .el-select
              margin-left 36px

        

        
        .start-end
          margin-bottom 30px

    li:nth-of-type(2n)
      margin-right 0

    .add-time
      padding-top 72px
      text-align center
      font-size $font-size-medium-x
      @extend .borderBox
      
      .icon-tianjiatupian
        cursor pointer
        font-size 60px
      
      .add
        height 16px
        margin-top 20px
        line-height @height
        color $color-text-mt


  .submit
    width 1200px
    margin 10px auto 0
    @extend .clear-fix
    .btn
      float left
      width 144px
      height 44px
      background-color #FFEFED
      border 1px solid $color-person-btn
      text-align center
      font-size $font-size-large
      line-height @height
      color $color-person-btn
      border-radius 2px
      cursor pointer
      transition .3s
      @extend .borderBox
      
      &:hover
        background-color $color-background-more
        color #fff
    .sure
      background-color $color-person-btn
      color #fff
      margin-right 30px

</style>

